<template>
  <el-dialog
    :close-on-click-modal="false"
    v-model="showDialog"
    :title="title"
    :destroy-on-close="true"
    @close="onCloseDialog"
    width="50%"
  >
    <el-tabs type="card" v-model="activeName">
      <el-tab-pane label="基本信息" name="essentialInfo">
        <el-form
          :model="formTerminalDefaultData"
          :rules="rulesTerminalDefault"
          ref="formTerminalDefaultData"
          label-width="100px"
        >
          <el-form-item label="设备名称">
            <el-input
              v-model="formTerminalDefaultData.deviceName"
              placeholder="设备名称"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="设备类型">
            <el-select
              v-model="formTerminalDefaultData.deviceTypeId"
              clearable
              placeholder="请选择"
              size="small"
            >
              <el-option label="请选择设备类型" value="0" />
              <el-option
                v-for="item in deviceTypeList"
                :key="item.id"
                :label="item.deviceTypeName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="自动更新">
            <el-switch v-model="isUpgrade" active-color="#13ce66" inactive-color="#ff4949" />
          </el-form-item>

          <el-form-item label="是否启用">
            <el-switch v-model="isStatus" active-color="#13ce66" inactive-color="#ff4949" />
          </el-form-item>
        </el-form>

        <el-row style="text-align: center">
          <span class="dialog-footer">
            <el-button @click="onCloseDialog">取 消</el-button>
            <el-button type="primary" @click="deviceInfoUpdate">确 定</el-button>
          </span>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
  import { updateDevice, getDeviceDetails } from '@/api/device/device.js';
  import { deviceTypeList } from '@/api/device/type.js';
  import { ElMessage } from 'element-plus';
  import { getDictOptions } from '@/utils/dict';

  export default {
    name: 'DialogDefaultTerminal',
    props: {
      dialog: {
        type: Boolean,
        default: false,
      },
      title: {
        type: String,
        default: '终端设置',
      },
      deviceId: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        activeName: 'essentialInfo',
        // showDialog: false,
        isUpgrade: true,
        isStatus: true,
        formTerminalDefaultData: {},
        deviceTypeList: [],
        rulesTerminalDefault: {
          deviceName: [{ required: true, message: '设备名称不可为空！', trigger: 'blur' }],
          deviceTypeId: [{ required: true, message: '设备类型不可为空！', trigger: 'blur' }],
        },
      };
    },
    computed: {
      showDialog() {
        return this.dialog;
      },
    },
    watch: {},
    created() {
      this.getDeviceDetails();
      //设备类型列表
      deviceTypeList({}).then((res) => {
        this.deviceTypeList = res;
      });
    },
    methods: {
      // 格式化字典
      formatDictMap(dictEnum) {
        return getDictOptions(dictEnum);
      },
      // 表单重置
      reset() {},
      //终端设置
      getDeviceDetails() {
        getDeviceDetails(this.deviceId).then((res) => {
          this.formTerminalDefaultData = res;
          if (this.formTerminalDefaultData.isStatus == 1) {
            this.isStatus = false;
          }
          if (this.formTerminalDefaultData.isUpgrade == 0) {
            this.isUpgrade = false;
          }
        });
      },
      //设备信息修改
      deviceInfoUpdate() {
        updateDevice(this.formTerminalDefaultData).then((res) => {
          console.log(res);
          if (res.success) {
            ElMessage({
              message: '修改成功',
              type: 'success',
            });
            this.$emit('submit');
          } else {
            ElMessage.error(res.msg);
          }
        });
      },
      onCloseDialog() {
        this.$emit('close');
      },
    },
  };
</script>

<style scoped></style>
